<template>
  <view class="container">
    <ve-card>
      <view class="please" @click="chooseMain">
        <text v-if="pageParams.feeCategory == 1">保养内容</text>
        <text v-else-if="pageParams.feeCategory == 2">维修内容</text>
        <view class="c2 fs28">
          <text v-if="pageParams.feeCategory == 1">选择保养内容</text>
          <text v-else-if="pageParams.feeCategory == 2">选择维修内容</text>
          <ve-icon name="arrow_right_0" size="32" style="margin-left: 12rpx;margin-bottom: 4rpx;" />
        </view>
      </view>
      <FeeForm :title="feeCategoryName" :form="item" v-for="(item, index) in feeDetailList" @allAmount="amountoAll" @itemNameDelete="itemDelete" :key="index"></FeeForm>
    </ve-card>


    <ve-bottom-box size="mini">
      <view class="bottom-footer">
        <view class="fee-num c1 fs32 fw600">
          <text>合计：</text>
          <text>{{ amount }}</text>
          <text>元</text>
        </view>
        <view class="bottom-line"></view>
        <ve-button type="primary" @click="toConfirm" :loading="okLoading" size="long">确认添加</ve-button>
      </view>
    </ve-bottom-box>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  import FeeForm from './components/fee-form.vue'
  import { addAssetFee } from '@/api/asset/asset-fee'

  const feeCategoryNameArr = ['购置费', '保养项目', '维修项目', '年检项目', '违章项目']

  const feeDetailList = ref([])
  const pageParams = ref({})
  const feeCategoryName = ref('')
  const amount = ref(0) //总价

  onLoad((options) => {
    pageParams.value = options
    feeCategoryName.value = feeCategoryNameArr[options.feeCategory]
  })

  const amountoAll = () => {
    amount.value = 0
    console.log('计算总价', feeDetailList.value)
    feeDetailList.value.forEach((i, index) => {
      amount.value += i.amount?i.amount:0
    })
  }
  // 删除
  const itemDelete = (id) => {
    feeDetailList.value.forEach((i, index) => {
      if(i.itemNameId == id){
        feeDetailList.value.splice(index, 1)
      }
    })
  }

  // 去选择保养项目
  const chooseMain = () => {
    var ids = []
    feeDetailList.value.forEach((it) => {
      ids.push(it.itemNameId)
    })
    uni.navigateTo({
      url: '/pages/asset/car-maintenance/components/projectList?ids=' + JSON.stringify(ids),
    })
  }

  // 选完保养项目后
  uni.$on('getMainlists', function (data) {
    const list = data.map((it) => {
      const findFee = feeDetailList.value.find((it1) => it1.itemNameId == it.maintenanceProjectId)
      if (findFee) {
        return findFee
      }
      return {
        itemNameId: it.maintenanceProjectId,
        itemName: it.maintenanceName,
        brand: '',
        unitPrice: '',
        costQuantity: '',
        amount: '',
      }
    })
    feeDetailList.value = list
  })

  // 去确认
  const okLoading = ref(false)
  const toConfirm = () => {
    okLoading.value = true
    const form = {
      ...pageParams.value,
      id: null,
      feeDetailList: feeDetailList.value,
    }
    addAssetFee(form).then((res) => {
      okLoading.value = false
      if (res.code == 200) {
        uni.$emit('refreshData')
        uni.navigateBack()
      }
    })
  }

</script>

<style lang="scss" scoped>
  .container {
    height: auto;
    min-height: 100%;
    padding: 24rpx;
  }
  .please {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .bottom-line{
    width: 100%;
    height: 2rpx;
    transform: scaleY(0.5);
    background: rgba(216, 216, 216, 0.3);
    margin: 32rpx 0;
  }
  .bottom-footer{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }
  .fee-num{
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    text:nth-child(2){
      font-size: 48rpx;
      color: #FE615A;
      line-height: 1;
    }
    text:nth-child(3){
      font-size: 24rpx;
      color: #FE615A;
      margin-left: 8rpx;
    }
  }
</style>
